var chartDom = document.getElementById("echarts2");
var myChart2 = echarts.init(chartDom);
var yName = [];
var inCount = [];
var outCount = [];
var option2;

function ajax2() {
  $.ajax({
    url: "/large-screen/accessControlDevice/selectInAndOutGroupByDoors",
    type: "GET",
    crossDomain: true,
    dataType: "json",
    async: false,
    success: function (res) {
      // console.log(res);
      yName = res.data.map((item) => {
        return item.regionName;
      });
      inCount = res.data.map((item) => {
        if (item.in === 0) {
          return "-";
        }
        return 0 - item.in;
      });
      outCount = res.data.map((item) => {
        if (item.out === 0) {
          return "-";
        }
        return item.out;
      });
    },
    error: function (xhr, status) {
      console.log(status);
    },
  });
  option2 = {
    // title: {
    //         text: "生产监控系统",
    //         subtext: "实时产能监控",
    //         left: "center"
    //     },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
      //     formatter: function(params){return Math.max(params.value,-params.value)}

      formatter: function (params) {
        return (
          params[0].name +
          "<br>进：" +
          -params[0].value +
          "<br>出：" +
          params[1].value
        );
      },
    },
    legend: {
      data: [
        { name: "进", itemStyle: { color: "#33CCCC", borderColor: "" } },
        { name: "出", itemStyle: { color: "#FF8D44" } },
      ],
      right: "3%",
      icon: "rect",
      top: "4%",
      textStyle: {
        color: "#FFFFFF",
        fontSize: "16px",
      },
    },
    grid: {
      left: "2%",
      right: "10%",
      bottom: "3%",
      containLabel: true,
    },
    dataZoom: [
      //滑动条
      {
        yAxisIndex: 0, //这里是从X轴的0刻度开始
        show: false, //是否显示滑动条，不影响使用
        type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        startValue: 0, // 从头开始。
        endValue: 3, // 一次性展示4个。
      },
    ],
    xAxis: [
      {
        type: "value",
        splitLine: {
          lineStyle: {
            color: "#3E4B56",
            type: "dashed",
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#0B1D2E",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "category",
        name: "单位：人",
        nameTextStyle: {
          color: "#FFFFFF",
          fontSize: 12,
          // nameLocation: "start",
          padding: [0, 350, 0, 0],
        },
        data: yName,
        axisLine: {
          lineStyle: {
            color: "#0D2435",
          },
        },
        axisLabel: {
          color: "#FFFFFF",
          margin: 35,
          textStyle: {
            fontSize: 16,
            fontFamily: "思源黑体",
          },
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "进",
        type: "bar",
        stack: "总量",
        // barMaxWidth: 30,
        barWidth: 22,
        showBackground: true,
        backgroundStyle: {
          color: "rgb(108, 128, 151,.1)",
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            1,
            0,
            0,
            0,
            [
              {
                offset: 1,
                color: "#33CCCC ",
              },
              {
                offset: 0,
                color: "rgba(51, 204, 204, 0)",
              },
            ],
            false
          ), // 渐变
        },
        label: {
          normal: {
            show: true,
            position: "left",
            formatter: function (params) {
              return `{shadow|${-params.value}}`;
            },
            rich: {
              shadow: {
                fontSize: 14,
                color: "#fff",
                textShadowColor: "#9DC8FF",
                textShadowBlur: 5,
              },
            },
          },
        },
        data: inCount /* [-120, -180, -320, -120, -132] */,
      },
      {
        name: "出",
        type: "bar",
        stack: "总量",
        barMaxWidth: 30,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            1,
            0,
            0,
            0,
            [
              {
                offset: 1,
                color: "rgba(122, 163, 204, 0)",
              },
              {
                offset: 0,
                color: "#FF8D44 ",
              },
            ],
            false
          ), // 渐变
        },
        label: {
          show: true,
          position: "right",
          formatter: function (params) {
            return `{shadow|${params.value}}`;
          },
          rich: {
            shadow: {
              fontSize: 14,
              color: "#fff",
              textShadowColor: "#9DC8FF",
              textShadowBlur: 5,
            },
          },
        },
        data: outCount,
      },
    ],
  };
  option2 && myChart2.setOption(option2);
}
ajax2()

autoMove();

function autoMove() {
  // 自动滚动：
  timeOut = setInterval(() => {
    if (option2.dataZoom[0].endValue == yName.length) {
      option2.dataZoom[0].endValue = 3;
      option2.dataZoom[0].startValue = 0;
    } else {
      option2.dataZoom[0].endValue = option2.dataZoom[0].endValue + 1;
      option2.dataZoom[0].startValue = option2.dataZoom[0].startValue + 1;
    }
    myChart2.setOption(option2);
    myChart2.on("mouseover", stop);
    myChart2.on("mouseout", goMove);
  }, 2000);
}
//停止滚动
function stop() {
  clearInterval(timeOut);
}
//继续滚动
function goMove() {
  autoMove();
}
setInterval(() => {
  ajax2()
}, 300000)